<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>filterSearch</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1 class="center-align">我的通讯录</h1>
    <input type="text" id="filterInput" placeholder="搜索姓名" />
    <ul id="names" class="collection with-header">
      <!-- A -->
      <li class="collection-header">
        <h5>A</h5>
      </li>
      <li class="collection-item">
        <a href="#">Adams</a>
      </li>
      <li class="collection-item">
        <a href="#">Abas</a>
      </li>
      <li class="collection-item">
        <a href="#">Alas</a>
      </li>
      <li class="collection-item">
        <a href="#">Avs</a>
      </li>
      <!-- B -->
      <li class="collection-header">
        <h5>B</h5>
      </li>
      <li class="collection-item">
        <a href="#">Bas</a>
      </li>
      <li class="collection-item">
        <a href="#">Bbs</a>
      </li>
      <li class="collection-item">
        <a href="#">Baal</a>
      </li>
      <li class="collection-item">
        <a href="#">Bvs</a>
      </li>
      <!-- C -->
      <li class="collection-header">
        <h5>C</h5>
      </li>
      <li class="collection-item">
        <a href="#">Cas</a>
      </li>
      <li class="collection-item">
        <a href="#">Cbs</a>
      </li>
      <li class="collection-item">
        <a href="#">Caal</a>
      </li>
      <li class="collection-item">
        <a href="#">Cvs</a>
      </li>
    </ul>
  </div>
  <script src="filterSearch.js"></script>
</body>
</html>